<template>
  <view class="userinfo_body">
    <view class="header">
      <view class="left"><uni-icons type="back" size="30" color="#ffb612" @click="back"></uni-icons></view>
      <view class="title">{{ isEditNickName ? '修改昵称' : '个人资料' }}</view>
    </view>
    <view class="form" v-show="!isEditNickName">
      <uni-forms>
        <uni-forms-item label="头像" name="name">
          <view class="" id="up" style="width: 100%;">
            <uni-file-picker :image-styles="imageStyles" :del-icon="false" disable-preview return-type="object" @select="updataFile12" limit="1" :value="avatar">
              <view class="avatar"><image :src="avatar" alt="" class="icon_img" mode="aspectFill" /></view>
            </uni-file-picker>
          </view>

          <view>
            <!-- <uni-file-picker @select="updataFile(e)" v-model="avatar" file-mediatype="all" :del-icon="false" fileMediatype="image" :image-styles="imageStyles" disable-preview> -->
            <!-- <image :src="avatar || ''" alt="" class="icon_img" mode="aspectFill" /> -->
            <!-- </uni-file-picker> -->
          </view>
        </uni-forms-item>
        <uni-forms-item label="昵称" name="age" @click="isShowUpdateName">{{ userInfo.username }}</uni-forms-item>
      </uni-forms>
    </view>
    <view class="edit">
      <view class="form" v-show="isEditNickName">
        <uni-forms :modelValue="formData1" :rules="rules" ref="nickForm">
          <uni-forms-item class="nickName_input" label="昵称" name="nickName">
            <uni-easyinput type="text" v-model="formData1.nickName" placeholder="请输入新昵称" clearable />
          </uni-forms-item>
          <view><button class="btn" @click="submitForm">确定</button></view>
        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config.js';
import { getUserInfoAPI, getAvatarAPI, updateNickNameAPI } from '@/api/user.js';
export default {
  data() {
    return {
      imageStyles: {
        width: 45,
        height: 45,
        border: {
          color: '#6c6c6c',
          width: 2,
          style: '',
          radius: '20px'
        }
      },
      formData1: {
        nickName: ''
      },
      avatar: '',
      token: '',
      rules: {
        nickName: {
          rules: [
            {
              required: true,
              errorMessage: '昵称为必填项'
            }
          ]
        }
      },
      userInfo: {},
      isEditNickName: false
    };
  },
  methods: {
    init() {
      this.getUserInfo();
    },
    isShowUpdateName() {
      this.isEditNickName = true;
      this.formData1.nickName = this.userInfo.username;
    },

    back() {
      if (!this.isEditNickName) {
        uni.switchTab({
          url: '/pages/mine/mine'
        });
      } else {
        this.isEditNickName = false;
        this.$refs.nickForm.clearValidate();
      }
    },
    async submitForm() {
      try {
        const res = await this.$refs.nickForm.validate();
        // console.log('收集的信息是', res);
        const { data } = await updateNickNameAPI({
          username: res.nickName
        });
        if (data.code === 200) {
          this.isEditNickName = false;
          this.formData1.nickName = '';
          this.init();
          uni.showToast({
            title: '修改昵称成功！'
          });
        }
      } catch (e) {
        console.log('s', e);
        //TODO handle the exception
      }
    },
    async getUserInfo() {
      const { data } = await getUserInfoAPI();
      this.userInfo = data.data;
      this.avatar = `${config.baseURL}/img/${this.userInfo.user.avatar}`;
    },
    updataFile12(e) {
      let _this = this;
      let url = '/user/edit/avatar';
      let file = e.tempFiles[0].file; //拿到上传的file
      const tempFilePaths = e.tempFilePaths;
      uni.showLoading({
        title: '上传中'
      });
      uni.uploadFile({
        url: config.baseURL + url,
        filePath: tempFilePaths[0],
        header: {
          token: this.token
        },
        formData: {
          type: Object,
          default() {
            return {};
          }
        },
        name: 'file',
        // file: {
        //   formData
        // },
        success: res => {
          uni.showToast({
            title: '上传成功'
          });
        },
        fail: err => {
          console.log(err);
        }
      });
    },

    async getAvatar(fileName) {
      uni.showToast({
        title: '上传成功'
      });
      const { data } = await getAvatarAPI(fileName);

      this.avatar = `http://47.115.211.73:8080/img/${data.message}`;
    }
  },
  onShow: function() {
    this.init();
    this.token = uni.getStorageSync('token');
  }
};
</script>

<style lang="scss">
.userinfo_body {
  height: 100vh;
  background-color: #333333;

  ::v-deep .edit {
    padding: 0 20px;

    .uni-easyinput__content-input {
      background-color: unset !important;
    }

    .nickName_input {
      border-radius: 8px;
      border: 1px solid #ffb612;

      .uni-easyinput__content-input {
        background-color: #4f4f4f !important;
      }

      .uniui-clear {
        color: #a7a7a7 !important;
      }

      .is-input-border {
        background-color: unset !important;
        border-color: #4f4f4f !important;
      }
    }

    .btn {
      background-color: #ffb612;
      color: #fff;
    }
  }

  ::v-deep .form {
    margin-top: 40rpx;

    .avatar {
      width: 70rpx;
      height: 70rpx;
      border: 1px solid;
      border-radius: 50%;
      // margin-right: 10rpx;
      color: white;

      .icon_img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .uni-forms-item {
      align-items: center;
      justify-content: space-between;
      background-color: #4f4f4f;
      padding-right: 20rpx;
      color: #ffb612;
      padding: 20rpx;

      .uni-forms-item__label {
        padding-left: 20rpx;
        color: #ffb612;
      }

      .uni-forms-item__content {
        text-align: end;
        display: contents;
        margin-right: 20rpx !important;
      }

      .uni-file-picker__container {
        justify-content: flex-end !important;
      }
    }
  }

  .header {
    color: #ffb612;
    display: flex;
    // justify-content: space-between;
    padding: 20rpx 10rpx;
    padding-top: 80rpx;
    align-items: center;
    background-color: #4f4f4f;

    .title {
      color: #ffb612;
      text-align: center;
      width: 80%;
    }
  }
}
</style>
